<template>
  <q-btn
    icon="question_answer"
    size="12px"
    :color="$q.dark.isActive ? '' : 'grey-8'"
    dense
    flat
    round
  >
    <q-menu
      @before-show="
        () => {
          f5()
        }
      "
    >
      <q-list>
        <q-item>
          <q-item-section>
            <q-item-label class="text-center">私信列表</q-item-label>
          </q-item-section>
        </q-item>
        <q-scroll-area style="width: 340px; height: 340px">
          <q-item
            clickable
            v-for="item in rows"
            :key="item.id"
            @click="
              () => {
                chatDig = true
                clearRed(item)
              }
            "
          >
            <q-item-section top avatar>
              <q-avatar size="38px">
                <q-img
                  error-src="/images/default-avatar.png"
                  :src="item.chatUser.avatar"
                  :ratio="1 / 1"
                />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label>
                {{ item.chatUser.username }}
              </q-item-label>
              <q-item-label caption lines="1">
                <div v-html="item.lastMsg"></div>
              </q-item-label>
            </q-item-section>
            <q-item-section side>
              <div class="row items-center">
                <div v-if="item.showRed" class="w-2 h-2 bg-red rounded"></div>
                <div>{{ item.relativeTime }}</div>
              </div>
            </q-item-section>
          </q-item>
          <q-item v-show="loading">
            <q-item-section top avatar>
              <q-skeleton type="QAvatar" size="32px" />
            </q-item-section>
            <q-item-section>
              <q-item-label><q-skeleton type="text" /></q-item-label>
              <q-item-label caption lines="1">
                <q-skeleton type="text" />
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-show="!loading && pageParam.recordCount == 0">
            <q-item-section class="text-center"> 暂无消息 </q-item-section>
          </q-item>
          <div class="row justify-center" v-if="pageParam.totalPage > 1">
            <q-btn
              dense
              :loading="loading"
              flat
              :disable="pageParam.recordCount == 0 || pageParam.pageNum == pageParam.totalPage"
              :label="pageParam.pageNum >= pageParam.totalPage ? '已加载全部' : '加载更多'"
              @click="
                () => {
                  pageParam.pageNum++
                  load()
                }
              "
            />
          </div>
        </q-scroll-area>
        <div class="row justify-center">
          <q-btn dense flat label="查看全部私信" to="/chat" />
        </div>
      </q-list>
    </q-menu>
    <div v-if="chatShowRed" class="absolute-right w-2 h-2 bg-red rounded"></div>
  </q-btn>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { chatFlag, chatUser } from 'src/service/api/chat'
import { useWebStore } from 'src/stores/webStore'
import { onMounted, ref, inject } from 'vue'
import type { EventBus } from 'quasar'
import { useQuasar } from 'quasar'
import { eventBusKey, MsgType } from 'src/use'
import { storeToRefs } from 'pinia'

const bus = inject(eventBusKey) as EventBus<Api.EventBusType>

const $q = useQuasar()

const webStore = useWebStore()

const { chatShowRed, chatDig, receiveUser } = storeToRefs(webStore)

const { refreshTag } = webStore

const pageParam = ref({
  query: '',
  order: 'create_time',
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
})

type rowType = ApiType<typeof chatUser>['Return']['rows'][0]
const rows = ref<Array<rowType>>([])

const loading = ref(false)
const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  load()
  refreshTag()
}

const load = () => {
  loading.value = true
  chatUser(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      rows.value.push(...data.rows)
      pageParam.value.pageNum = data.pageNum
      pageParam.value.pageSize = data.pageSize
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
    }
  })
}

const clearRed = (item: rowType) => {
  receiveUser.value = item.chatUser
  chatFlag({ userId: receiveUser.value.id }).then(({ error }) => {
    if (!error) {
      item.showRed = false
      refreshTag()
    }
  })
}

onMounted(() => {
  refreshTag()
  bus.on(MsgType.refreshChat, () => {
    f5()
  })
})
</script>

<style scoped></style>
